前一篇只有提到如何使用json載入spriteSheet並且播放,本篇則是關於如何去控制spriteSheet,範例延續上一篇繼續使用

相關屬性:

• play()和stop() 播放控制
  上一篇有使用到,預設是stop

• animationSpeed
  上一篇也有用到,控制播放速度

• gotoAndPlay() 與 gotoAndStop()
  本篇會提到,用來設定起始/結束播放時的影格

• totalFrames 回傳全部的影格數量

• loop 重複播放,預設是true

• onLoop 重複播放時呼叫

• onComplete 當loop = false 時,跑到最後一個影格時呼叫

let anim; //和上篇不同 要先把anim 先拿出來定義 , 在偵聽事件的時候才找的到人

PIXI.loader.add('sheet.json').load(onAssetsLoaded);

function onAssetsLoaded() {
let frames = [];

for (let i = 1; i < 11; i++) {
  let val = i;

  frames.push(PIXI.Texture.fromFrame(val + '.png'));
}
anim = new PIXI.extras.AnimatedSprite(frames);
anim.x = app.screen.width / 2;
anim.y = app.screen.height / 2;
anim.anchor.set(0.5);
anim.animationSpeed = 0.5;
app.stage.addChild(anim);

//以上都跟上篇一樣

anim.interactive = true; //設定為可互動
anim.buttonMode = true; // 設定cursor: pointer

// 監聽drag事件
anim.on('pointerdown', onDragStart)
  .on('pointerup', onDragEnd)
  .on('pointerupoutside', onDragEnd)
  .on('pointermove', onDragMove);
}

pointerdown pointerup pointerupoutside pointermove 系列事件是直接包含touch和mouse兩種事件, 就不用特別設定了~

如果要分開寫的話就改用以下:
mouse事件

 .on('mousedown', function(){})
 .on('mouseup', function(){})
 .on('mouseupoutside', function(){})
 .on('mousemove', function(){});

touch事件

 .on('touchstart', function(){})
 .on('touchend', function(){})
 .on('touchendoutside', function(){})
 .on('touchmove', function(){});

最後就是drag事件的內容

function onDragStart() {
    // 將對象dragging設定為TRUE,為TRUE時move事件才允許移動
    this.dragging = true; 
  }
  function onDragEnd() {
    this.dragging = false;
    anim.stop(); // 拖曳結束後停止動畫
    anim.gotoAndStop(4); // 拖曳結束後會停在第五個影格
  }
  function onDragMove(event) {
    if (this.dragging) { // 為TRUE時move事件才允許移動
      anim.play(); // 拖曳時開始播放動畫
      let newPosition = event.data.global; 
      // 抓事件的position 並設定到對象的x,y
      this.x = newPosition.x;
      this.y = newPosition.y;
    }
  }

這樣範例就會在拖曳時走路,放下後停止啦~